import { Input, Select, Button, Table, Switch, Typography, Upload, Modal } from 'antd'
import axios from 'axios'
import { useState, useEffect } from 'react'
import { DownloadOutlined, PlusCircleTwoTone } from '@ant-design/icons'
import { get_banji,update_banji,add_banji,dele_banji } from '../request/instance'
export default function App() {
    let [list, setList] = useState([])//班级数据
    let [list_teacher, setList_teacher] = useState([])//老师数据
    let [list_student, setList_student] = useState([])//学生数据
    let [clas, setClas] = useState([])//班级
    let [grade, setGrade] = useState([])//年级
    let [term,setTerm]=useState([])//学段
    let [type,setType]=useState([])//班级类型
    let [blength,setBlength]=useState(0)//长度
    let [find_class, setFind_class] = useState('')
    let [find_grade, setFind_grade] = useState('')
    let [find_term, setFind_term] = useState('')
    let [search, setSearch] = useState(0)
    let [open, setOpen] = useState(false)
    let [open1, setOpen1] = useState(false)
    let [add_ca, setAdd_ca] = useState('')
    let [add_type, setAdd_type] = useState('')
    let [add_clas, setAdd_clas] = useState('')
    let [add_grade, setAdd_grade] = useState('')
    let [add_term,setAdd_term]=useState('')
    let [update_ca, setUpdate_ca] = useState('')
    let [update__id, setUpdate__id] = useState()
    let [update_type, setUpdate_type] = useState('')
    let [update_clas, setUpdate_clas] = useState('')
    let [update_grade, setUpdate_grade] = useState('')
    let [update_term,setUpdate_term]=useState('')
    const [tableParams, setTableParams] = useState({
        pagination: {
          current: 1,
          pageSize: 2,
        },
      });
    let get_list = async () => {
        let obj = {}
        if (find_class) {
            obj.class = find_class
        }
        if (find_grade) {
            obj.grade = find_grade
        }
        if (find_term) {
            obj.term = find_term
        }
        let {
            data: { student, clas, grade,teacher,banji,term,type,blength }
        } =await get_banji(obj)
        console.log(banji);
        
            setList(banji)
            setClas(clas)
            setTerm(term)
            setList_student(student)
            setGrade(grade)
            setList_teacher(teacher)
            setType(type)
            setBlength(blength)
    }
    useEffect(() => {
        get_list()
        setTableParams({
            ...tableParams,
            pagination: {
              ...tableParams.pagination,
              total: length,
            },
    })
    }, [search])
    const handleChange = (value) => {
        setFind_class(value)
        console.log(value);

    };
    const handleChange1 = (value) => {
        setFind_term(value)
        console.log(value);
    };
    const handleChange2 = (value) => {
        setFind_grade(value)
        console.log(value);
    };
    const find_search = () => {
        setSearch(1)
        get_list()
    }
    const reset = async () => {
        setFind_class('')
        setFind_grade('')
        setFind_term('')
        setSearch(0)
    }
    let columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '班级',
            render: (_, e) => {
                return e.class.class
            },
            key: 'id'
        },
        {
            title: '年级',
            render: (_, e) => {
                return e.grade.grade
            },
            key: 'id'
        },
        {
            title: '学段',
            render: (_, e) => {
                return e.term.term
            },
            key: 'id'
        },
        {
            title: '班主任',
            render: (_, e) => {
                return e.ca.name
            },

            key: 'id'
        },
        {
            title: '学生人数',
            render: (_, e) => {
                return list_student.filter(i=>i.class==e.class._id&&i.grade==e.grade._id).length
            },
            key: 'id'
        },
        {
            title: '班级类型',
            render: (_, e) => {
                return e.type.type
            },
            key: 'id'
        },
        {
            title: '操作',
            key: 'id',
            render: (_, e) => {
                return <>
                    <span style={{ color: 'blue' }} onClick={() => { get_update(e) }}>编辑</span>
                    <span onClick={() => { dele(e) }} style={{ color: 'blue', marginLeft: '20px' }}>删除</span>
                    <span onClick={() => { get_update(e) }} style={{ color: 'blue', marginLeft: '20px' }}>查看</span>
                </>
            }
        },
    ]
    let add = async () => {
        await add_banji({
            id: blength + 1,
            term:add_term,
            ca:add_ca,
            class: add_clas,
            grade: add_grade,
            type:add_type
        }).then(res=>{
            if (res.data.code == 200) {
                alert('添加成功')
                setOpen(false)
                get_list()
            }
        })
    }
    let get_update = (e) => {
        setUpdate_clas(e.class._id)
        setUpdate_grade(e.grade._id)
        setUpdate_ca(e.ca._id)
        setUpdate_term(e.term._id)
        setUpdate_type(e.type._id)
        setUpdate__id(e._id)
        setOpen1(true)

    }
    let update = async () => {
        await update_banji({
            _id: update__id,
            term:update_term,
            teacher:update_ca,
            class: update_clas,
            grade: update_grade,
            type:update_type
        }).then(res => {
            alert('修改成功')
            setOpen1(false)
            get_list()
        })
        
    }
    let dele = async (e) => {
        console.log(e._id);
        
        await dele_banji({_id:e._id}).then(res => {
            alert('删除成功')
            get_list()
        })
    }
    const handleTableChange = (pagination) => {
        console.log(pagination);
        setTableParams({
          pagination,
        });
    
        // `dataSource` is useless since `pageSize` changed
        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
          setData([]);
        }
      };
    return <>
        <div style={{ width: '100vw', height: '100vh', padding: '20px' }}>
            <h3>教师管理</h3>
            <div style={{ width: '80vw', height: '15vh', background: 'white', padding: '10px 30px', borderRadius: '20px' }}>
                <div style={{ marginTop: '20px' }}>
                    班级：<Select onChange={handleChange} defaultValue={"选择班级"} style={{ width: '120px', marginRight: '20px' }} options={clas.map(i => ({ label: i.class, value: i._id }))} />
                    年段：<Select onChange={handleChange1} defaultValue={"选择年段"} style={{ width: '120px', marginRight: '20px' }} options={term.map(i => ({ label: i.term, value: i._id }))} />
                    年级：<Select onChange={handleChange2} defaultValue={"选择年级"} style={{ width: '120px', marginRight: '20px' }} options={grade.map(i => ({ label: i.grade, value: i._id }))} /><br></br>
                    <Button style={{ marginTop: '60px', marginRight: '50px' }} type="primary" onClick={find_search}>查询</Button>
                    <Button style={{ marginTop: '60px' }} onClick={reset}>重置</Button>
                </div>
            </div>
            <div style={{ width: '80vw', height: '75vh', background: 'white', marginTop: '50px', padding: '10px 30px', borderRadius: '20px' }}>
                <div style={{ display: 'flex' }}>
                    <Upload action='http://localhost:3010/upload'>
                        <a href='JavaScript:;' style={{ textDecoration: 'none', margin: '10px 10px 10px 65vw' }}><DownloadOutlined />导入班级</a>
                    </Upload>
                    <a href='JavaScript:;' onClick={() => setOpen(true)} style={{ textDecoration: 'none', marginLeft: '10px' }}><PlusCircleTwoTone />新增班级</a>
                </div>
                <Table
                    dataSource={list}
                    columns={columns}
                    pagination={tableParams.pagination}
                    onChange={handleTableChange}
                />
            </div>
        </div>
        {/* 添加 */}
        <Modal
            centered
            open={open}
            onOk={() => { add() }}
            onCancel={() => setOpen(false)}
            width={1000}
            height={1000}
        >
            <h2>基础信息</h2>
            年级：<Select onChange={(e) => { setAdd_grade(e) }} defaultValue='请选择年级' style={{ width: '120px', marginRight: '20px',marginTop:'20px' }} options={grade.map(i => ({ label: i.grade, value: i._id }))} />
            班级：<Select onChange={(e) => { setAdd_clas(e) }} defaultValue='请选择班级' style={{ width: '120px', marginRight: '20px' }} options={clas.map(i => ({ label: i.class, value: i._id }))} /><br></br>
            班主任：<Select onChange={(e) => { setAdd_ca(e) }} defaultValue='请选择班主任' style={{ width: '120px', marginRight: '20px',marginTop:'20px' }} options={list_teacher.filter(i=>i.post=='67b3185f2637b4ef4335d8eb').map(i => ({ label: i.name, value: i._id }))} />
            班级类型：<Select onChange={(e) => { setAdd_type(e) }} defaultValue='请选择班级类型' style={{ width: '120px', marginRight: '20px' }} options={type.map(i => ({ label: i.type, value: i._id }))} /><br></br>
            学段：<Select onChange={(e) => { setAdd_term(e) }} defaultValue='请选择学段' style={{ width: '120px', marginRight: '20px',marginTop:'20px' }} options={term.map(i => ({ label: i.term, value: i._id }))} />
        </Modal>
        {/* 修改 */}
        <Modal
            centered
            open={open1}
            onOk={() => { update() }}
            onCancel={() => setOpen1(false)}
            width={1000}
            height={1000}
        >
            <h2>基础信息</h2>
            年级：<Select onChange={(e) => { setUpdate_grade(e) }} defaultValue={update_grade} style={{ width: '120px', marginRight: '20px',marginTop:'20px' }} options={grade.map(i => ({ label: i.grade, value: i._id }))} />
            班级：<Select onChange={(e) => { setUpdate_clas(e) }} defaultValue={update_clas} style={{ width: '120px', marginRight: '20px' }} options={clas.map(i => ({ label: i.class, value: i._id }))} /><br></br>
            班主任：<Select onChange={(e) => { setUpdate_ca(e) }} defaultValue={update_ca} style={{ width: '120px', marginRight: '20px',marginTop:'20px' }} options={list_teacher.filter(i=>i.post=='67b3185f2637b4ef4335d8eb').map(i => ({ label: i.name, value: i._id }))} />
            班级类型：<Select onChange={(e) => { setUpdate_type(e) }} defaultValue={update_type} style={{ width: '120px', marginRight: '20px' }} options={type.map(i => ({ label: i.type, value: i._id }))} /><br></br>
            学段：<Select onChange={(e) => { setUpdate_term(e) }} defaultValue={update_term} style={{ width: '120px', marginRight: '20px',marginTop:'20px' }} options={term.map(i => ({ label: i.term, value: i._id }))} /><br></br>
        </Modal>
    </>
}